<template>
  <div class="main">
    <!-- <goBack :white="true" aa="./indexs" :hasTitle="true" :topTitle="conditionTitle"></goBack> -->
    <headerBack>
      <b slot="my-center" style="font-weight:600;color:rgba(34,34,34,1);font-size:0.36rem">{{ conditionTitle }}</b>
    </headerBack>
    <div class="outDiv">
      <tab :line-width="4" custom-bar-width="0.4rem">
        <tab-item @on-item-click="onItemClick" selected>概况</tab-item>
        <tab-item @on-item-click="onItemClick">相关院校</tab-item>
      </tab>
      <div class="line"></div>
      <!-- 概况详情 -->
      <!-- <div v-if="choTabItem == 0" class="pathDetailSurveyArea">
        <Survey :conditionId="conditionId"></Survey>
      </div> -->
      <!-- 相关院校 -->
      <!-- <div v-else class="pathDetailSchoolArea">
        <AboutSchool :conditionId="conditionId"></AboutSchool>
      </div> -->
      <div>
        <keep-alive>
          <component v-bind:is="tabView" :conditionId="conditionId" :dataSourse="dataSourse"></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import headerBack from '~/components/headerBack'
import ls from 'store2'
import { Tab, TabItem } from 'vux'
import Survey from './survey'
import RelativeSchool from './relativeSchool'
export default {
  components: {
    headerBack,
    Tab,
    TabItem,
    Survey,
    RelativeSchool,
  },
  created() {
    this.dataSourse = JSON.parse(this.$route.query.type)
    this.conditionId = this.dataSourse.id
    this.$visit('sxRoute/' + this.conditionId)
    this.conditionTitle = this.dataSourse.pathName
  },
  mounted() {
    ls.remove('pathDetail')
  },
  data() {
    return {
      conditionTitle: null,
      conditionId: null,
      choTabItem: 0,
      tabView: 'Survey',
      dataSourse: null,
    }
  },
  methods: {
    onItemClick(item) {
      this.choTabItem = item
      if (item) {
        this.tabView = 'RelativeSchool'
      } else {
        this.tabView = 'Survey'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  position: relative;
  .line {
    width: 100%;
    height: 0.24rem;
    background: #fff;
    border-bottom: 1px solid#E5E8ED;
    position: relative;
    z-index: 10;
  }
  .pathDetailSurveyArea {
    padding: 0.32rem;
  }
}
.vux-tab-wrap {
  z-index: 10;
}
.vux-tab .vux-tab-item {
  background: none;
  color: #222;
  font-size: 0.3rem;
  font-weight: bold;
}
.vux-tab .vux-tab-item.vux-tab-selected {
  color: #222;
}
/deep/.vux-tab-bar-inner {
  background-color: @mainColor;
  width: 0.4rem !important;
  height: 0.08rem;
}
</style>
